<template>
  <div class="">
    <!-- <h2>公共组件button</h2> -->
    <button :class="['mybutton', 'my-button--' + type]" @click="handler">
      <!-- <button id="mybutton" :class="'my-button--' + type"> -->
      <!-- 动态绑定类名的时候 绑定多个类名的时候可以用对象 也可以用数组 -->
      <!-- :class="{mybutton:true,aaa:false}" -->
      <span>
        <slot></slot>
      </span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["type"],
  data() {
    return {};
  },
  mounted() {},
  methods: {
    handler() {
      this.$emit("click");
    },
  },
  components: {},
};
</script>

<style lang="scss">
.mybutton {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.my-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
.my-button--success {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}
.my-button--warning {
  color: #fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
}
</style>
